<%@page import="org.shop.entity.security.MyUserDetail" %>
<%@page import="org.shop.util.ObjUtil" %>
<%@page import="org.springframework.security.core.context.SecurityContextImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

    SecurityContextImpl securityContextImpl = (SecurityContextImpl) request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
    MyUserDetail ud = null;
    Byte state = 0;
    if (ObjUtil.isNotNullAndEmpty(securityContextImpl)) {
        ud = (MyUserDetail) securityContextImpl.getAuthentication().getPrincipal();
        state = ud.getState();
    }
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
    <title>论坛</title>
    <link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
    <link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
    <link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="<%=basePath%>assets/js/jquery-2.1.1.min.js"></script>
    <script src="<%=basePath%>assets/js/fontSize.js"></script>
    <style>
        body {
            padding-bottom: 1.6rem;
        }

        .header_ul li {
            float: left;
            width: 25%;
        }

        .header_ul li a {
            font-size: 0.28rem;
            height: 0.75rem;
            line-height: 0.8rem;
            padding: 0 0.2rem;
            display: inline-block;
        }

        .header_ul li a.active {
            color: #FF3D20;
            border-bottom: 2px solid #FF3D20;
        }

        .banner {
            height: 3rem;
            overflow: hidden;
        }

        .banner img {
            width: 100%;
        }

        .label_content {
            line-height: 0.6rem;
        }

        .title_content {
            font-size: 0.28rem;
            margin: auto;
            width: 1.8rem;
        }

        .title_content i {
            width: 0.26rem;
            height: 0.04rem;
            border-top: 3px solid #FF3F25;
            display: inline-block;
            margin: 0 2px;
        }

        .label_box {
            overflow: hidden;
        }

        .max_height {
            max-height: 2rem;
        }

        .label {
            padding: 0 0.2rem;
            border-radius: 0.1rem;
            background-color: #448ACA;
            color: #fff;
            float: left;
            margin: 0.2rem;
            height: 0.6rem;
        }

        .more_label {
            text-align: center;
            border-top: 1px solid #F4F4F4;
            margin: 0 0.2rem;
            line-height: 0.5rem;
        }

        .goods {
            margin: 0.2rem 0;
        }

        .goods_list {
            padding: 0 0.2rem;
        }

        .photo {
            width: 0.8rem;
        }

        .photo img {
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
        }

        .info {
            line-height: 0.36rem;
            margin-top: 0.02rem;
            font-size: 0.26rem;
        }
        .time {
            color: #989898;
            font-size: 0.24rem;
        }

        .goods_introduce {
            line-height: 0.4rem;
            margin: 0.2rem 0;
            font-size: 0.28rem;
        }

        .goods_img img {
            width: 2rem;
            height: 2.4rem;
            margin-right: 0.12rem;
        }

        .operation {
            line-height: 0.8rem;
            text-align: right;
            font-size: 0.26rem;
            margin-top: 0.2rem;
        }

        .operation_btn {
            padding:0.1rem;
            position: relative;
            margin-left: 0.1rem;
        }

        .operation_btn i {
            width:0.4rem;
            height:0.4rem;
            display: inline-block;
            position: absolute;
            top:0.04rem;
            background-size: cover;
            margin-right: 0.06rem;
        }
        .operation_btn span{
            margin-left: 0.5rem;
        }
        .favorite_o{
            background-image: url("<%=basePath%>assets/images/favorite.png");
        }
        .active_favorite{
            background-image: url("<%=basePath%>assets/images/active_favorite.png");
        }
        .info_img{
            background-image: url("<%=basePath%>assets/images/info_img.png");
        }

        .fixed_btn {
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 50%;
            position: fixed;
            right: 0.4rem;
            bottom: 1.2rem;
        }

        .fixed_btn img {
            width: 100%;
        }

        .find a .img{
            display: none;
        }
        .find a .img2{
            display: block;
        }
        .find a p{
            color: #FF3F25;
        }
    </style>
</head>
<body>
<input id="basePath" type="hidden" value="<%=basePath%>">
<div class="header">
    <ul class="header_ul">
        <li class="forum"><a class="active">论坛</a></li>
        <li class="question_answer"><a>问答</a></li>
        <li class="activity"><a>活动</a></li>
        <li class="invite"><a>招聘</a></li>
    </ul>
</div>
<div class="body_content">
    <div class="banner">
        <img src="<%=basePath%>assets/images/timg(2).jpg" alt="">
    </div>
    <div class="label_content border-bottom-8">
        <div class="title_content">
            <i class="line"></i><span>热门话题</span><i class="line"></i>
        </div>
        <div class="label_box clearFirx max_height">
        </div>
        <div class="more_label">
            <span class="look_more">展开</span>
            <i class="fa fa-angle-double-down"></i>
        </div>
    </div>
</div>
<div class="goods_list"></div>
<div class="fixed_btn">
    <img src="<%=basePath%>assets/images/add.png" alt="" onclick="issue()">
</div>
<%@ include file="../footer.jsp" %>
</body>
<script>
	//滚动加载
	var geting = false;//是否加载信息，默认为false
	var currentPage = 1;//当前页
	var pageSize = 10;//每页数据数

	$(function () {
	    $(".header_ul a").click(function () {
	        $(".header_ul a").removeClass("active");
	        $(this).addClass("active");
	    })
	    $(".more_label").click(function () {
	        $(".label_box").toggleClass("max_height");
	        if($(this).find(".look_more").text() == "展开"){
	        	$(".look_more").html("收起");
	        	$(".look_more").siblings("i").removeClass("fa-angle-double-down");
	        	$(".look_more").siblings("i").addClass("fa-angle-double-up");
	        }else{
	        	$(".look_more").siblings("i").removeClass("fa-angle-double-up");
	        	$(".look_more").siblings("i").addClass("fa-angle-double-down");
	        	$(".look_more").html("展开");
	        }
	    })
	    $.ajax({
			url : "<%=basePath%>app/getAllClassInfoList",
			async:false,
			dataType : "json",
			type : "post",
			data : "",
			success : function(data) {
				$.each(data, function (i, item) {
					var html = '<a href="<%=basePath%>jsp/app/find/forumClassDetails.jsp?classId='+item.classId+'&className='+item.className+'">'+
						'<div class="label">'+item.className+'</div>'+
					'</a>'
					$(".label_box").append(html);
				})
			},
			error : function(data) {
				layer.open({
				    content: '网络错误~'
				    ,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
				  });
			}
		})
		$('.label_box').find('.label').each(function() {
	    	$(this).css('backgroundColor',getRandomColor());
	    })

	    getData();
	    
	    $(window).scroll(function () {
			if (geting) {
	        	return;
	        }
	        var scrollTop = $(this).scrollTop();
	        var scrollHeight = $(document).height();
	        var windowHeight = $(this).height();
	        if (scrollTop + windowHeight == scrollHeight) {
	        	currentPage++;
	            getData();
	        }

	    });
	    
	    
	  	//赞||取消赞
		$('.praise').click(function () {
			if("<%=securityContextImpl%>" == "null"){
	    		window.location.href = "<%=basePath%>app/appLogin2";
	    		return;
	    	}
			
			var state = 1;
			
			var targetId = $(this).siblings('input').val();
	    	$.ajax({
		    	url: "<%=basePath%>app/addPraise",
		    	async:false,
		        type: 'post',
		        data: {"postId":targetId,"targetId":targetId,"praiseType":1},
		        dataType: 'json',
		        success: function (data) {
		        	if(data.state==1){
		        		state = 1;
		        	}
    	        },error:function (){
    	        }
			});
	    	
	    	if(state == 1){
	    		if($(this).find("i").attr("class") == "active_favorite"){
		    		$(this).find('span').html(Number($(this).find('span').text()) - 1);
	    		}else{
		    		$(this).find('span').html(Number($(this).find('span').text()) + 1);
	    		}
	    		$(this).find("i").toggleClass("favorite_o");
		        $(this).find("i").toggleClass("active_favorite")
	    	}
		});
	})

    function getData() {
    	geting = true;
    	$.ajax({
			url : "<%=basePath%>app/getPostMessageList",
			async:false,
			dataType : "json",
			type : "post",
			data : {
				"currentPage" : currentPage,
				"pageSize" : pageSize
			},
			success : function(data) {
				$.each(data, function (i, item) {
					var html = '<div class="goods border-bottom-1">'+
				        '<div class="business_info clearFirx">'+
				            '<div class="photo float_l">'+
				                '<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage='+item.userPhoto+'" alt="">'+
				            '</div>'+
				            '<div class="info float_l">'+
				                '<span class="name">'+item.userName+'</span><br>'+
				                '<span class="time">'+item.createDate+'</span>'+
				            '</div>'+
				        '</div>'+
				        '<div class="goods_detail">'+
				        	'<a href="<%=basePath%>app/getPostDetails?commentsId='+item.commentsId+'">'+
					            '<p class="goods_introduce">'+item.content+'</p>'+
					            '<div class="goods_img">';
					            	if(item.contentImg != null && item.contentImg != ""){
						            	var contentImgArr = item.contentImg.split(",");
						            	for(var i=0;i<contentImgArr.length;i++){
						            		html+='<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage='+contentImgArr[i]+'" alt="">';
						            	}
					            	}
					            html+='</div>'+
				            '</a>'+
				            '<div class="operation">'+
				                '<span class="operation_btn praise">'
				                    if(<%=state%> == 1 && item.state == 1){
				                    	html+='<i class="active_favorite"></i>'
				                	}else{
				                		html+='<i class="favorite_o"></i>'
				                	}
			                    	html+='<span>'+item.praiseCount+'</span>'+
				               	'</span>'+
				               	'<a href="<%=basePath%>app/getPostDetails?commentsId='+item.commentsId+'">'+
				                	'<span class="operation_btn message">'+
					                    '<i class="info_img"></i>'+
					                    '<span>'+item.answerCount+'</span>'+
					                '</span>'+
				                '</a>'+
				                '<input type="hidden" value="'+item.commentsId+'">'+
				            '</div>'+
				        '</div>'+
					'</div>';
					$(".goods_list").append(html);
					geting = false;
				});
			},
			error : function(data) {
				layer.open({
				    content: '网络错误~'
				    ,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
				  });
			}
		})
        $(".favorite").click(function () {
            $(this).find("i").toggleClass("favorite_o");
            $(this).find("i").toggleClass("active_favorite")
        });
    }

    function getRandomColor(){
	    var rgb='rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';
// 	    console.log(rgb);
	    return rgb;
    }

  	//发布
    function issue() {
   		if(<%=state%> == 2){
			layer.open({
		    	content: '发布功能被禁用，请联系管理员'
			    ,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
		  	});
   		}else{
   			window.location.href="<%=basePath%>jsp/app/find/issueForum.jsp";
   		}
	}
  	//顶层跳转
	$(".question_answer").click(function(){
        window.location.href="<%=basePath%>jsp/app/find/questionsAnswers.jsp";
    });
    $(".activity").click(function(){
        window.location.href="<%=basePath%>jsp/app/find/activity.jsp";
    });
    $(".invite").click(function(){
        window.location.href="<%=basePath%>jsp/app/find/invite.jsp";
    });

</script>
</html>